<template>
  <div style="display: flex; gap: 20px">
    <div class="card1"></div>
    <div class="card2"></div>
  </div>
</template>
<style scoped>
.card1,.card2{
  width: 100px;
  height: 100px;
}


@keyframes spin1 {
  to {
    --my-angle-1: 90deg;
  }
}
.card1 {
  --my-angle-1: 0deg;
  background: linear-gradient(
    var(--my-angle-1),
    rgba(2, 0, 36, 1) 0%,
    rgba(0, 212, 255, 1) 43%,
    rgba(9, 9, 121, 1) 89%
  );
  animation: spin1 1s infinite;
}


@property --my-angle-2 {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes spin2 {
  to {
    --my-angle-2: 90deg;
  }
}
.card2 {
  --my-angle-2: 0deg;
  background: linear-gradient(
    var(--my-angle-2),
    rgba(2, 0, 36, 1) 0%,
    rgba(0, 212, 255, 1) 43%,
    rgba(9, 9, 121, 1) 89%
  );
  animation: spin2 1s infinite;
}
</style>
